<template>
    <div>
        <el-tree 
            :data="treeData" 
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :render-content="renderContent"
        ></el-tree>
    </div>
</template>
<script>
import eventBus from "@/utils/eventBus";
export default {
    
    data(){
        return {
            page: {},
            graph: {},
            tableNodes: [],
            treeData:[],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
        }
    },
    created(){
        // TODO
        this.bindEvent();
    },
    methods:{
        bindEvent(){
            let self = this;
            eventBus.$on("afterAddPage", page => {
                self.page = page;
                self.graph = self.page.graph;
                
            })
            
        },
        bindVal(){
            this.tableNodes.length = 0
            this.treeData.length = 0
            self.graph.findAll('node', node => {
                let tableNode = {}
                tableNode.id=node.get('model').id
                tableNode.label=node.get('model').label
                this.tableNodes.push(tableNode)
                tableNode.children = [{'label':'日期','id':'[日期]'},{'label':'来源','id':'[来源]'},{'label':'地区','id':'[地区]'}]
                this.treeData.push(tableNode)
            });
        },
        renderContent(h, { node }) {
        return (
          <span class="custom-tree-node">
            <span>{ node.label} - {node.key}</span>
          </span>);
      }
    }
}
</script>